<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { RadioButton, RadioGroup } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deviceTopic } from '#/api/iot/device/manage';

import { columns } from './data';
import { OperationPermissionsEnum } from './dict';

const props = defineProps(['device']);

const active = ref<string>('1');

const gridOptions: VxeGridProps = {
  columns,
  height: '500',
  toolbarConfig: {
    enabled: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async (_, formValues = {}) => {
        const resp = await deviceTopic({
          ...formValues,
          deviceId: props.device.id,
          topicSourceType: active.value,
        });
        return resp;
      },
    },
  },
  /**
   * 虚拟滚动  默认关闭
   */
  scrollY: {
    enabled: false,
    gt: 0,
  },
  id: 'topic-list-index',
};

const [BasicTable, tableApi] = useVbenVxeGrid({
  gridOptions,
});

const handleChange = () => {
  tableApi.query();
};
</script>

<template>
  <div class="flex flex-col">
    <RadioGroup v-model:value="active" @change="handleChange">
      <RadioButton
        :value="item.dictValue"
        :key="item.dictValue"
        v-for="item in OperationPermissionsEnum"
      >
        {{ item.dictLabel }}
      </RadioButton>
    </RadioGroup>
    <div class="flex-1 overflow-hidden">
      <BasicTable />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
